<template>
    <div>
        <q-dialog ref="dialog" @hide="onDialogHide" persistent >
            <q-card class="im-voice-call">
                <q-img
                        :src="backImg"
                        class="im-voice-call"
                >
                    <div class="absolute-full text-subtitle1 ">
                        <div class="row">
                            <div class="col-4 offset-4" >
                                <q-avatar>
                                    <img  src="https://t1.hxzdhn.com/uploads/allimg/20150727/h0qxuyb5k4o.jpg" >
                                </q-avatar>
                                <span class="text-cut text-subtitle1 ">张悟空</span>
                            </div>
                            <div class="col-2 offset-2 ">
                                <q-btn flat  size="10px" icon="fullscreen_exit" ></q-btn>
<!--                                crop_square-->
                            </div>
                        </div>

                        <div class="absolute-center text-subtitle2" style="margin-top: 10px">
                            10:52
                        </div>
                        <div class="text-subtitle1  im-voice-call-action" >
                            <q-btn class="bg-red " style="margin-left: 30px" flat round   icon="close" @click="onDialogHide" >
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    取消
                                </q-tooltip>
                            </q-btn>
                            <q-btn class="bg-green " style="margin-left: 40px" flat round   icon="call">
                                <q-tooltip
                                        transition-show="scale"
                                        transition-hide="scale"
                                        :offset="[10, 10]"
                                >
                                    接通
                                </q-tooltip>
                            </q-btn>

                        </div>
                    </div>

                </q-img>
            </q-card>
        </q-dialog>
    </div>


</template>

<script>
  export default {
    name: "voiceCall",
    props:{
      userInfo:Object
    },
    data(){
      return {
        backImg:require('../../statics/j-im.png')
      }
    },
    methods:{
      onDialogHide () {
        // QDialog发出“hide”事件时
        // 需要发出
        this.$emit('hide')
      },

      // 以下方法是必需的
      // (不要改变它的名称 --> "show")
      show () {
        this.$refs.dialog.show()
      },

      // 以下方法是必需的
      // (不要改变它的名称 --> "hide")
      hide () {
        this.$refs.dialog.hide()
      },
    },
  }
</script>

<style scoped>
    .im-voice-call {
        height: 200px;
        width: 220px
    }
    .im-voice-call-action {
       margin-top: 50px;
    }
</style>
